<!-- 添加课程首页 -->
<template>
    <div class="app-container">
        <el-container v-show="step<4">
            <el-header>
                <el-steps :active="step" align-center>
                    <el-step title="编辑课程基本信息" description></el-step>
                    <el-step title="编辑课程章节" description></el-step>
                    <el-step title="提交保存" description></el-step>
                </el-steps>
            </el-header>
            <el-main>
                <course-info
                    v-show="step===1"
                    :courseId="courseId"
                    :classId="classId"
                    ref="courseInfo"
                    @mayChangeCourseId="mayChangeCourseId"
                ></course-info>
                <chapter v-if="step===2" :courseId="courseId"></chapter>
                <total-info v-if="step===3" :courseId="courseId" :classId="classId"></total-info>
            </el-main>
            <el-footer>
                <el-button
                    type="primary"
                    icon="el-icon-d-arrow-left"
                    @click="step--"
                    :disabled="step>1?false:true"
                    style="margin-right:40px;"
                >上一步</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                    type="primary"
                    @click="next"
                    :disabled="step<4?false:true"
                    style="margin-left:40px;"
                >
                    下一步
                    <i class="el-icon-d-arrow-right el-icon--right"></i>
                </el-button>
            </el-footer>
        </el-container>
        <el-result v-if="step===4" icon="success" title="课程已保存" subTitle="可以选择发布课程">
            <template slot="extra">
                <el-button
                    v-if="status==='Draft'"
                    type="success"
                    size="medium"
                    @click="releaseCourse()"
                >发布</el-button>
                <el-button type="primary" size="medium" @click="backRouter()">返回</el-button>
            </template>
        </el-result>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import CourseInfo from "./CourseInfo";
import Chapter from "./Chapter";
import TotalInfo from "./TotalInfo.vue";
import { getCourseById, saveOrUpdateCourse } from "@/api/course/course";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: { CourseInfo, Chapter, TotalInfo },
    props: ["id", "classId"],
    data() {
        //这里存放数据
        return {
            courseId: this.id,
            status: "Draft",
            step: 1,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        next() {
            //保存课程基本信息
            if (this.step === 1) {
                this.$refs.courseInfo.saveOrUpdateCourse();
            }
            this.step++;
        },
        prev() {
            this.step--;
        },
        mayChangeCourseId(courseId) {
            this.courseId = courseId;
        },
        //发布课程
        releaseCourse() {
            let course = { id: this.courseId, status: "Normal" };
            saveOrUpdateCourse(course).then((response) => {
                this.$message({
                    message: "发布成功",
                    type: "success",
                });
                this.backRouter();
            });
        },
        backRouter() {
            if (!this.classId) {
                $router.push({
                    name: "Course",
                });
            } else {
                let tmp = this.classId;
                this.$router.push({
                    name: "ClassCourse",
                    params: { classId: tmp },
                });
            }
        },
    },
    created() {
        if (this.id) {
            getCourseById(this.id).then((response) => {
                this.status = response.data.course.status;
            });
        }
    },
    mounted() {},
};
</script>
<style scoped>
.el-footer {
    display: flex;
    position: absolute;
    /* 和body这个盒子的底部距离为0px */
    bottom: 0px;
    width: 100%;
    justify-content: center;
    align-items: center;
}
</style>